<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :width="1120"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :title="$isEmpty(data) ? '添加项目' : '修改项目'"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
        <a-row :gutter="16" type="flex">
          <a-col :span="8">
            <a-form-item label="所属计划">
              <a-select
                v-decorator="['LID', { rules: [{ required: true, message: '请选择所属计划' }] }]"
                placeholder="请选择所属计划"
                :options="planOptions"
                showSearch
                optionFilterProp="children"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="项目名称">
              <a-input
                v-decorator="['Name', { rules: [{ required: true, message: '请输入项目名称' }] }]"
                placeholder="请输入项目名称"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="项目地址">
              <a-input
                v-decorator="['Address', { rules: [{ required: true, message: '请输入项目地址' }] }]"
                placeholder="请输入项目地址"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="开发商">
              <a-input
                v-decorator="['DLID', { rules: [{ required: true, message: '请输入开发商' }] }]"
                placeholder="请输入开发商"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="勘察单位">
              <a-input
                v-decorator="['PPID', { rules: [{ required: true, message: '请输入勘察单位' }] }]"
                placeholder="请输入勘察单位"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设计单位">
              <a-input
                v-decorator="['DSID', { rules: [{ required: true, message: '请输入设计单位' }] }]"
                placeholder="请输入设计单位"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="施工单位">
              <a-input
                v-decorator="['BDID', { rules: [{ required: true, message: '请输入施工单位' }] }]"
                placeholder="请输入施工单位"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="监理单位">
              <a-input
                v-decorator="['SVID', { rules: [{ required: true, message: '请输入监理单位' }] }]"
                placeholder="请输入监理单位"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="计划开工日期">
              <a-date-picker v-decorator="['PlanStartDate']" placeholder="请选择计划开工日期" valueFormat="YYYY-MM-DD">
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="实际开工日期">
              <a-date-picker
                v-decorator="['RealityStartDate']"
                placeholder="请选择实际开工日期"
                valueFormat="YYYY-MM-DD"
              >
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="计划竣工日期">
              <a-date-picker v-decorator="['PlanFinishDate']" placeholder="请选择计划竣工日期" valueFormat="YYYY-MM-DD">
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="实际竣工日期">
              <a-date-picker
                v-decorator="['RealityFinishDate']"
                placeholder="请选择实际竣工日期"
                valueFormat="YYYY-MM-DD"
              >
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="总建筑面积(㎡)">
              <a-input-number
                v-decorator="['GrossArea']"
                placeholder="请输入总建筑面积"
                :formatter="(value) => (value ? `${value}㎡` : '')"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="总套数">
              <a-input-number v-decorator="['GrossSum']" placeholder="请输入总套数"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="所需总投资（万元）">
              <a-input-number
                v-decorator="['GrossInvest']"
                placeholder="请输入所需总投资"
                :formatter="(value) => (value ? `${value}万元` : '')"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="土地面积(㎡)">
              <a-input-number
                v-decorator="['Acreage']"
                :formatter="(value) => (value ? `${value}㎡` : '')"
                placeholder="请输入土地面积"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="状态">
              <a-select
                v-decorator="['Status', { rules: [{ required: true, message: '请选择状态' }] }]"
                placeholder="请选择状态"
                :options="statusOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="创建日期">
              <a-date-picker v-decorator="['CreateDate']" placeholder="请选择创建日期" valueFormat="YYYY-MM-DD">
              </a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item label="描述" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-textarea
                placeholder="描述"
                v-decorator="['Descr']"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <file-list
        v-if="visible"
        ref="fileList"
        category="SCTP"
        tableNames="ebll_No001HousProject_Progress"
        :fileList="detailData.SCWJJH"
        :option="{
          typeRequired: false,
        }"
      ></file-list>
    </a-spin>
  </a-modal>
</template>

<script>
import { yearPicker, fileList } from '@/components'
import { getPlanOrProjetOptions, postProject, getProjectDetail } from '@/api/followUpManagement'
import { getDropdownList } from '@/api/common'
import pick from 'lodash.pick'
export default {
  components: {
    yearPicker,
    fileList
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'project' }),
      isSubmiting: false,
      spinning: false,
      detailData: {},
      planOptions: [],
      statusOptions: []
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      const getPlanOptions = getPlanOrProjetOptions({
        mode: 'JH'
      })
      const getStatus = getDropdownList({ PmKey: 'ProjectStatus' })
      const requestArr = [getPlanOptions, getStatus]
      if (!this.$isEmpty(this.data)) {
        const getDetail = getProjectDetail({
          ID: this.data.ID
        })
        requestArr.push(getDetail)
      }
      Promise.all(requestArr)
        .then((res) => {
          this.planOptions = res[0].map((e) => {
            return {
              label: e.NAME,
              value: e.ID
            }
          })
          this.statusOptions = res[1].map((e) => {
            return {
              label: e.DROPVALUE,
              value: e.DROPVALUE
            }
          })
          if (!this.$isEmpty(this.data)) {
            this.detailData = res[2].data
            this.form.setFieldsValue(
              pick(res[2].data, [
                'LID',
                'Name',
                'Address',
                'DLID',
                'PPID',
                'DSID',
                'BDID',
                'SVID',
                'PlanStartDate',
                'RealityStartDate',
                'PlanFinishDate',
                'RealityFinishDate',
                'GrossArea',
                'GrossSum',
                'GrossInvest',
                'Acreage',
                'Status',
                'CreateDate',
                'Descr'
              ])
            )
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.form.resetFields()
      this.detailData = {}
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const isAdd = this.$isEmpty(this.data)
          this.$refs.fileList.validateFields((fileErr, fileData) => {
            Object.assign(values, {
              ID: this.data.ID || 0,
              SCWJJH: fileData
            })
            this.isSubmiting = true
            postProject({
              State: isAdd ? 'add' : 'update',
              project: values
            })
              .then((res) => {
                this.$message.success(isAdd ? '添加成功！' : '修改成功！')
                this.$emit('success', isAdd)
                this.close()
              })
              .finally(() => {
                this.isSubmiting = false
              })
          })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  white-space: normal;
  padding-right: 12px;
}
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
